<template>
    <div id="app">
    <div id="left" class="container">
      <h1>土地管理</h1>
      <div class="form-item">
        <label class="form-label" for="eventName">划分属地选择</label>
        <select class="form-select">
            <option>片区1</option>
            <option>片区2</option>
            <option>片区3</option>
        </select>
      </div>
      <div class="form-item">
        <label class="form-label" for="description">转移原因</label>
        <textarea
          class="form-input"
          id="description"
          v-model="description"
        ></textarea>
      </div>
      <div class="form-item">
        <label class="form-label" for="description">原始网格</label>
        <select class="form-select">
            <option>一级网格1</option>
            <option>一级网格2</option>
            <option>一级网格3</option>
        </select>
        <select class="form-select">
            <option>二级网格1</option>
            <option>二级网格2</option>
            <option>二级网格3</option>
        </select>
        <select class="form-select">
            <option>三级网格1</option>
            <option>三级网格2</option>
            <option>三级网格3</option>
        </select>
      </div>
      <div class="form-item">
        <label class="form-label" for="description">目的网格</label>
        <select class="form-select">
            <option>一级网格1</option>
            <option>一级网格2</option>
            <option>一级网格3</option>
        </select>
        <select class="form-select">
            <option>二级网格1</option>
            <option>二级网格2</option>
            <option>二级网格3</option>
        </select>
        <select class="form-select">
            <option>三级网格1</option>
            <option>三级网格2</option>
            <option>三级网格3</option>
        </select>
      </div>
      <div class="form-item">
        <label class="form-label">操作网格员</label>
        <input
          class="form-input"
          type="text"
          v-model="reporterName"
          :disabled="isAnonymous"
        />
      </div>
      <div class="form-item">
        <label class="form-label" for="contact">联系电话：</label>
        <input class="form-input" type="text" id="contact" v-model="contact" />
      </div>
      <div class="form-item datepicker">
        <label class="form-label">上报时间：</label>
        <el-date-picker
          v-model="reportDate"
          type="datetime"
          placeholder="选择日期时间"
          :picker-options="datePickerOptions"
        ></el-date-picker>
      </div>
      <div class="form-item">
        <button class="form-button submit-button" @click="submitForm">提交</button>
      </div>
    </div>
    </div>
</template>
<script>
export default {
    name: "spaceManage",
    data(){
        return  {
      show: true,
      path: [{ lng: 115.8988, lat: 28.68505 }],
      icon: {
        url: require("@/assets/images/事故现场.png"),
        size: { width: 289, height: 191 },
        opts: { anchor: { width: 289, height: 191 } },
      },
      listDa: [
        {
          title: "东湖人工智能产业园",
          lei: 115.8988,
          lat: 28.68505,
          cont: "早上8:05 两车相撞",
        },
      ],
      landmarkPois: [
        {
          lng: 115.8988,
          lat: 28.68505,
          html: "8:05从怀来人工智能产业轩出发",
          pauseTime: 3,
        },
      ],
      eventName: "",
      reporterName: "",
      isAnonymous: false,
      contact: "",
      reportDate: "",
      location: "",
      uploadedPhotos: [],
      description: "",
      eventType: "",
      reportDate: "", // 上报时间字段
      datePickerOptions: {
        // 配置日期选择器的选项
        // 例如：可设置可选的日期范围、日期格式等
      }
    }
    },
    methods: {
        
    }
}
</script>
<style scoped>
.bm-view {
  width: 100%;
  height: 100%;
  margin-top: 0px;
}
#app {
  display: flex;
  width: 100%;
  height: 100%;
}
#left {
  left: 0px;
  flex: 45%;
  height: 100%;
  background: url("@/assets/images/guideBg.jpg");
  background-size: 110% 110%;
}
#right {
  flex: 55%;
  height: 100%;
}
/* 页面布局 */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

.container {
  max-width: 70%;
  height: 95%;
  margin: 0 auto;
  padding: 20px;
}

/* 表单样式 */
.form-item {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

.form-input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

.form-input[type="checkbox"] {
  width: auto;
}

.form-button {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}

.form-select{
    width: 30%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    margin: 5px;
}

/* 日期选择器样式 */
.datepicker {
  position: relative;
}

.datepicker input {
  padding-right: 30px;
}

.datepicker .calendar-icon {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  font-size: 16px;
  color: #999;
  cursor: pointer;
}

/* 图片上传样式 */
.upload-container {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}

.upload-item {
  width: calc(33.33% - 10px);
  margin-right: 10px;
  margin-bottom: 10px;
}

.upload-item img {
  width: 100%;
  height: auto;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.uploaded-photos-container {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}

.uploaded-photo {
  width: 100px;
  height: 100px;
  margin-right: 10px;
  margin-bottom: 10px;
}

.uploaded-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.submit-button {
    width: 50%;
    margin-left: 25%;
}
</style>